<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>王者荣耀</title>
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/reset.css">
  <style>
    .header {
      background-color: rgb(0,0,0,.8);
      width: 100%;
    }
    .header .area {
      display: flex;
      height: 84px;
      justify-content: space-between;
    }
    .header .left-area {
      display: flex;
    }
    .header .left-area .logo a {
      display: block;
      position: relative;
      top: 50%;
      transform: translate(0,-50%);
      width: 200px;
      height: 54px;
      background: url(./img/logo\ \(1\).png) no-repeat;
    }
    .header .left-area .nav-list{
      display: flex;
      margin-left: 30px;
      padding-right: 5px;
    }
    .header .left-area .nav-list .item {
      width: 110px;
    }
    .header .left-area .nav-list .item a {
      display: block;
      font-size: 18px;
      height: 84px;
      padding-top: 20px;
      box-sizing: border-box;
      color: #c9c9dd;
      text-align: center;
    }
    .header .left-area .nav-list .item:hover{
      background: url(./img/main_sprite.png) no-repeat 0 0;
      color: #91763f;
    }
    .header .left-area .nav-list .item a:hover span{
      color: #91763f;
    }
    .header .left-area .nav-list .item a:hover{
      color: #91763f;
    }
    .header .left-area .nav-list .item a .desc{
      font-size: 12px;
      display: block;
      margin-top: 6px;
      color: #858792;
    }
    .header .right-area {
      display: flex;
      align-items: center;
    }
    .header .right-area .info {
      margin-left: 25px;
    }
    .header .right-area .info a{
      color: #ffffff;
      font-size: 16px;
    }
    .header .right-area .info p {
      color: #858792;
      font-size: 14px;
      margin-top: 5px;
    }
    .header .right-area .admin {
      border: 1px solid #d9ad50;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div class="header">
    <div class="area header_wrapper">
      <div class="left-area">
        <h1 class="logo">
          <a href="https://pvp.qq.com/">
          </a>
        </h1>
        <ul class="nav-list">
          <li class="item">
            <a href="#">
              游戏资料
              <span class="desc">DATA</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              内容中心
              <span class="desc">CONTENTS</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              赛事中心
              <span class="desc">MATCH</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              百态王者
              <span class="desc">CULTURE</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              社区互动
              <span class="desc">COMMUNITY</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              玩家支持
              <span class="desc">PLAYER</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              IP新游
              <span class="desc">NEW GAMES</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="right-area">
        <a class="admin" href="#">
          <img src="./img/admin.png" class="admin">
        </a>
        <div class="info">
              <a href="#">
                欢迎登录
                <p>登陆后查看游戏战机</p>
              </a>
        </div>
      </div>
    </div>
  </div>
  </div>




</body>
</html>